<template>
  <div class="gantt-chart" ref="ganttChart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      ganttData: [
        { name: 'Task 1', start: '2024-05-01', end: '2024-05-05' },
        { name: 'Task 2', start: '2024-05-06', end: '2024-05-10' },
        // Add more tasks as needed
      ]
    };
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chart = echarts.init(this.$refs.ganttChart);

      const option = {
        tooltip: {
          formatter: function (params) {
            return params.marker + params.data.name + '<br/>' +
              'Start: ' + params.data.start + '<br/>' +
              'End: ' + params.data.end;
          }
        },
        xAxis: {
          type: 'time',
          splitLine: {
            show: false
          }
        },
        yAxis: {
          data: this.ganttData.map(task => task.name),
          splitLine: {
            show: false
          }
        },
        series: [{
          type: 'custom',
          renderItem: function (params, api) {
            var yValue = api.value(2);
            var start = api.coord([api.value(0), yValue]);
            var end = api.coord([api.value(1), yValue]);
            var height = api.size([0, 1])[1] * 0.6;

            return {
              type: 'rect',
              shape: echarts.graphic.clipRectByRect({
                x: start[0],
                y: start[1] - height / 2,
                width: end[0] - start[0],
                height: height
              }, {
                x: params.coordSys.x,
                y: params.coordSys.y,
                width: params.coordSys.width,
                height: params.coordSys.height
              }),
              style: api.style()
            };
          },
          encode: {
            x: [1, 2],
            y: 0
          },
          data: this.ganttData.map(task => [task.start, task.end, task.name])
        }]
      };

      chart.setOption(option);
    }
  }
};
</script>

<style>
.gantt-chart {
  margin: 20px;
}
</style>
